<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
      <div class="rightTwo" />
    </div>
    <el-divider />
    <div class="overview-tabs">
      <scr-list  @tableData="tableData"   ref="mySrc" @srcData="srcData"/>
      <list-table ref="myTable" @showModal="showModal" />
    </div>
  </div>

</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import scrList from './components/ownerSearch.vue'
import listTable from './components/ownerTable.vue'
export default {
  name: 'PagePermission',
  components: { Breadcrumb, scrList, listTable },
  methods: {
    handleRolesChange() {
      this.$router.push({ path: '/permission/index?' + +new Date() })
    },
    tableData(){
        this.$refs.myTable.getList();
    },
    srcData(params){
        this.$refs.myTable.srcGetList(params);
    },
    showModal(params){
      this.$refs.mySrc.showModal(params);
    }
  }
}
</script>

<style lang="scss" scoped>
  .breadcrumb-container {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 0 14px;

    &::after {
      content: '';
      position: absolute;
      left: 0px;
      top: 50%;
      width: 2px;
      height: 37px;
      background-color: #5AC6B7;
      transform: translateY(-50%);
    }
  }
  .overview-tabs{padding: 10px;}
  .rightTwo{position: absolute;top: 10px;right: 10px;width: 120px;font-size: 13px;color: #5AC6B7;}
  .rightTwo p{display: inline-block;margin-left: 8px;}
</style>
